clean-webpack-plugin

What is clean-webpack-plugin?

The clean-webpack-plugin is a plugin for webpack, a module bundler for JavaScript. It is used to remove/clean your build folder(s) before building. This ensures that only used files are generated when your project is built, preventing the accumulation of outdated files from previous builds.

What are clean-webpack-plugin's main functionalities?

Removing all files inside webpack's output.path directory

This feature automatically cleans up the output directory specified in webpack's configuration before each build, ensuring that only the files generated in the current build are present.

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

Preserving specific files or directories during clean

This feature allows you to exclude specific files or directories from being deleted when the output directory is cleaned. This is useful for cases where you want to keep certain files across builds.

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*'],
      cleanStaleWebpackAssets: false,
      protectWebpackAssets: false
    }),
  ],
};

Other packages similar to clean-webpack-plugin

rimraf

Rimraf is a deep deletion module for node (like `rm -rf`). It's not specifically tied to webpack but can be used in npm scripts or directly in node scripts to clean directories. It's simpler but requires manual configuration compared to clean-webpack-plugin's integration with webpack.

del

Del is another package for deleting files and directories. Similar to rimraf, it's used in build processes but isn't tied to webpack. It provides more control over what to delete through glob patterns and options but lacks the direct webpack integration that clean-webpack-plugin offers.

README

Clean for WebPack

A webpack plugin to remove/clean your build folder(s) before building

Installation

npm i clean-webpack-plugin --save-dev

Usage

const CleanWebpackPlugin = require('clean-webpack-plugin')

// webpack config
{
  plugins: [
    new CleanWebpackPlugin(paths [, {options}])
  ]
}

Example Webpack Config

This is a modified version of WebPack's Plugin documentation that includes the Clean Plugin.

const CleanWebpackPlugin = require('clean-webpack-plugin'); //installed via npm
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

// the path(s) that should be cleaned
let pathsToClean = [
  'dist',
  'build'
]

// the clean options to use
let cleanOptions = {
  root:     '/full/webpack/root/path',
  exclude:  ['shared.js'],
  verbose:  true,
  dry:      false
}

// sample WebPack config
const webpackConfig = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(pathsToClean, cleanOptions),
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

Paths (Required)

An [array] of string paths to clean

[
  'dist',         // removes 'dist' folder
  'build/*.*',    // removes all files in 'build' folder
  'web/*.js'      // removes all JavaScript files in 'web' folder
]

Options and defaults (Optional)

{
  // Absolute path to your webpack root folder (paths appended to this)
  // Default: root of your package
  root: __dirname,

  // Write logs to console.
  verbose: true,
  
  // Use boolean "true" to test/emulate delete. (will not remove files).
  // Default: false - remove files
  dry: false,           

  // If true, remove files on recompile. 
  // Default: false
  watch: false,

  // Instead of removing whole path recursively,
  // remove all path's content with exclusion of provided immediate children.
  // Good for not removing shared files from build directories.
  exclude: [ 'files', 'to', 'ignore' ],

  // allow the plugin to clean folders outside of the webpack root.
  // Default: false - don't allow clean folder outside of the webpack root
  allowExternal: false
  
  // perform clean just before files are emitted to the output dir
  // Default: false
  beforeEmit: false
}